/****************************************************/
// Theme name: Nexus - Bootstrap Admin Template
// Theme URI: http://nexus.lethemes.net/1.0/html/
// Description: Nexus is a fully responsive admin dashboard template
// Tags: admin, admin dashboard, cms, crm, project managerment, responsive, webapp, backend, bootstrap admin, responsive admin
// Author: Loi Le
// Version: 1.0
/****************************************************/

// Line chart
// --------------------------------------------------
//Total visits
var dataLine1 = [
    [year(2010), 63000],
    [year(2011), 74000],
    [year(2012), 91000],
    [year(2013), 117000],
    [year(2014), 138000]
];
//Change
var dataLine2 = [
    [year(2010), 12.5],
    [year(2011), 17.46],
    [year(2012), 22.97],
    [year(2013), 28.57],
    [year(2014), 17.95]
];
var datasetLine = [{
    label: "Total Visits",
    data: dataLine1,
    points: {
        symbol: "triangle"
    },
    color: "#5A46CB"
}, {
    label: "Change",
    data: dataLine2,
    yaxis: 2,
    points: {
        symbol: "diamond"
    },
    color: "#46BFCB"
}];
var optionsLine = {
    series: {
        lines: {
            show: true
        },
        points: {
            fill: true,
            show: true
        }
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#DDD",
    },
    xaxis: {
        font: {
            color: '#000',
            size: 12
        },
        mode: "time",
        tickSize: [1, "year"],
        timeformat: "%Y",
    },
    yaxes: [{
        font: {
            color: '#000',
            size: 12
        },
        tickFormatter: function(v, axis) {
            return v.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        },
    }, {
        font: {
            color: '#000',
            size: 12
        },
        position: "right",
        tickFormatter: function(v, axis) {
            return v + "%";
        }
    }],
    tooltip: true,
    tooltipOpts: {
        content: "%s: %y visitors in %x",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 2,
        container: $("#line-chart-legend")
    }
};
$.plot($("#line-chart"), datasetLine, optionsLine);

// Bar chart 
// --------------------------------------------------

var dataBar = [
    [0, 11],
    [1, 15],
    [2, 25],
    [3, 24],
    [4, 13],
    [5, 18]
];
var datasetBar = [{
    label: "2014 Average Temperature",
    data: dataBar,
    color: "#5A46CB"
}];
var ticksBar = [
    [0, "London"],
    [1, "New York"],
    [2, "New Delhi"],
    [3, "Taipei"],
    [4, "Beijing"],
    [5, "Sydney"]
];
var optionsBar = {
    series: {
        bars: {
            show: true,
            fill: 1
        }
    },
    bars: {
        align: "center",
        barWidth: 0.5,
        lineWidth: 0
    },
    xaxis: {
        font: {
            color: '#000',
            size: 12
        },
        ticks: ticksBar
    },
    yaxis: {
        tickSize: 10,
        font: {
            color: '#000',
            size: 12
        },
        tickFormatter: function(v, axis) {
            return v + "°C";
        }
    },
    tooltip: true,
    tooltipOpts: {
        content: "%x: %y",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 1,
        container: $("#bar-chart-legend")
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#DDD",
    }
};
$.plot($("#bar-chart"), datasetBar, optionsBar);

// Horizontal bar chart
// --------------------------------------------------

var dataHozBar = [
    [1582.3, 0],
    [28.95, 1],
    [1603, 2],
    [774, 3],
    [1245, 4],
    [85, 5],
    [1025, 6]
];
var dataSetHozBar = [{
    label: "Precious Metal Price",
    data: dataHozBar,
    color: "#5A46CB"
}];
var ticksHozBar = [
    [0, "Gold"],
    [1, "Silver"],
    [2, "Platinum"],
    [3, "Palldium"],
    [4, "Rhodium"],
    [5, "Ruthenium"],
    [6, "Iridium"]
];
var optionsHozBar = {
    series: {
        bars: {
            show: true,
            fill: 1
        }
    },
    bars: {
        align: "center",
        barWidth: 0.5,
        horizontal: true,
        lineWidth: 0
    },
    xaxis: {
        tickFormatter: function(v, axis) {
            return v.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        },
        font: {
            color: '#000',
            size: 12
        }
    },
    yaxis: {
        ticks: ticksHozBar,
        font: {
            color: '#000',
            size: 12
        }
    },
    tooltip: true,
    tooltipOpts: {
        content: "%y: %x USD/oz",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 1,
        container: $("#hoz-bar-chart-legend")
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#DDD",
    }
};
$.plot($("#hoz-bar-chart"), dataSetHozBar, optionsHozBar);

// Stacked chart
// --------------------------------------------------

var dataStack1 = [
    [year(1996), 44],
    [year(2000), 37],
    [year(2004), 35],
    [year(2008), 36],
    [year(2012), 46]
];
var dataStack2 = [
    [year(1996), 32],
    [year(2000), 24],
    [year(2004), 40],
    [year(2008), 38],
    [year(2012), 29]
];
var dataStack3 = [
    [year(1996), 25],
    [year(2000), 33],
    [year(2004), 26],
    [year(2008), 36],
    [year(2012), 29]
];

function year(year) {
    return new Date(year, 1, 1).getTime();
}
var datasetStack = [{
    label: "Gold Medals",
    data: dataStack1,
    color: "#5A46CB",
    points: {
        symbol: "diamond"
    }
}, {
    label: "Silver Medals",
    data: dataStack2,
    color: "#46BFCB",
    points: {
        symbol: "cross",
    }
}, {
    label: "Bronze Medals",
    data: dataStack3,
    color: "#22A7F0",
    points: {
        symbol: "square"
    }
}];
var optionsStackArea = {
    series: {
        stack: true,
        lines: {
            show: true,
            fill: 1
        }
    },
    xaxis: {
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        },
        mode: "time",
        tickSize: [4, "year"],
        timeformat: "%Y",
    },
    yaxis: {
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        }
    },
    tooltip: true,
    tooltipOpts: {
        content: "%y %s in %x",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 3,
        container: $("#stack-area-chart-legend")
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#FFF",
    },
};
var optionsStackBar = {
    series: {
        stack: true,
        bars: {
            show: true,
            fill: 1
        }
    },
    bars: {
        align: "center",
        lineWidth: 0,
        barWidth: 24 * 60 * 60 * 365 * 4 * 500
    },
    xaxis: {
        font: {
            color: '#000',
            size: 12
        },
        mode: "time",
        tickSize: [4, "year"],
        timeformat: "%Y"
    },
    yaxis: {
        font: {
            color: '#000',
            size: 12
        }
    },
    tooltip: true,
    tooltipOpts: {
        content: "%y %s in %x",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 3,
        container: $("#stack-bar-chart-legend")
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#DDD",
    },
};

// Stacked horizontal chart
// --------------------------------------------------

var dataStackHoz1 = [
    [44, year(1996)],
    [37, year(2000)],
    [35, year(2004)],
    [36, year(2008)],
    [46, year(2012)]
];
var dataStackHoz2 = [
    [32, year(1996)],
    [24, year(2000)],
    [40, year(2004)],
    [38, year(2008)],
    [29, year(2012)]
];
var dataStackHoz3 = [
    [25, year(1996)],
    [33, year(2000)],
    [26, year(2004)],
    [36, year(2008)],
    [29, year(2012)]
];
var datasetStackHoz = [{
    label: "Gold Medals",
    data: dataStackHoz1,
    color: "#5A46CB",
}, {
    label: "Silver Medals",
    data: dataStackHoz2,
    color: "#46BFCB"
}, {
    label: "Bronze Medals",
    data: dataStackHoz3,
    color: "#22A7F0"
}];
var optionsStackHozBar = {
    series: {
        stack: true,
        bars: {
            show: true,
            fill: 1
        }
    },
    bars: {
        align: "center",
        lineWidth: 0,
        horizontal: true,
        barWidth: 24 * 60 * 60 * 365 * 4 * 500
    },
    yaxis: {
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        },
        mode: "time",
        tickSize: [4, "year"],
        timeformat: "%Y",
        min: year(1995),
        max: year(2013)
    },
    xaxis: {
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        }
    },
    tooltip: true,
    tooltipOpts: {
        content: "%x %s in %y",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 3,
        container: $("#stack-hoz-bar-chart-legend")
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#FFF",
    },
};
$.plot($("#stack-area-chart"), datasetStack, optionsStackArea);
$.plot($("#stack-bar-chart"), datasetStack, optionsStackBar);
$.plot($("#stack-hoz-bar-chart"), datasetStackHoz, optionsStackHozBar);

// Pie chart
// --------------------------------------------------

var dataSetPie = [{
    label: "Asia",
    data: 4119630000,
    color: "#4A36BF"
}, {
    label: "Latin America",
    data: 590950000,
    color: "#5540C9"
}, {
    label: "Africa",
    data: 1012960000,
    color: "#5A46CB"
}, {
    label: "Europe",
    data: 727080000,
    color: "#7160D2"
}, {
    label: "North America",
    data: 344120000,
    color: "#7F70D7"
}];
var optionsPie = {
    series: {
        pie: {
            show: true,
            label: {
                show: true
            }
        },
    },
    grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        content: "%s: %p.0%",
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
};
var optionsDonut = {
    series: {
        pie: {
            show: true,
            innerRadius: 0.5,
            label: {
                show: true
            }
        },
    },
    grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        content: "%s: %p.0%",
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
};
$.plot($("#pie-chart"), dataSetPie, optionsPie);
$.plot($("#donut-chart"), dataSetPie, optionsDonut);

// Combine chart
// --------------------------------------------------

// New visitors
var dataCombine1 = [
    [0, 8672],
    [1, 7035],
    [2, 7298],
    [3, 7195],
    [4, 8375],
    [5, 8008]
];
// Returning visitors
var dataCombine2 = [
    [0, 14492],
    [1, 14811],
    [2, 13684],
    [3, 12081],
    [4, 14093],
    [5, 14255]
];
// Page views
var dataCombine3 = [
    [0, 24558],
    [1, 24881],
    [2, 28047],
    [3, 26146],
    [4, 26639],
    [5, 29483]
];
// Total visits
var dataCombine4 = [
    [0, 1.27],
    [1, -5.69],
    [2, 0.65],
    [3, -8.13],
    [4, 16.56],
    [5, -0.91]
];
var ticksCombine = [
    [0, "Jan"],
    [1, "Feb"],
    [2, "Mar"],
    [3, "Apr"],
    [4, "May"],
    [5, "Jun"],
    [6, "Jul"],
    [7, "Aug"],
    [8, "Sep"],
    [9, "Oct"],
    [10, "Nov"],
    [11, "Dec"]
];
var datasetCombine = [{
    label: "Page Views",
    data: dataCombine3,
    color: "#46BFCB",
    bars: {
        show: true,
        align: "center",
        barWidth: 0.5,
        lineWidth: 0,
        fill: 1
    }
}, {
    label: "New Visitors",
    data: dataCombine1,
    color: "#9E18D8",
    points: {
        symbol: "diamond",
        show: true
    },
    lines: {
        show: true
    },
    idx: 1
}, {
    label: "Returning Visitors",
    data: dataCombine2,
    color: "#1abc9c",
    points: {
        symbol: "square",
        show: true
    },
    lines: {
        show: true
    },
    idx: 2
}, {
    label: "Total Visits",
    data: dataCombine4,
    yaxis: 2,
    points: {
        symbol: "triangle",
        fillColor: "#264348",
        show: true
    },
    color: "#09316D",
    lines: {
        show: true
    },
    idx: 3
}];
somePlot = null;
togglePlot = function(seriesIdx) {
    if (seriesIdx != null) {
        var someData = somePlot.getData();
        someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
        somePlot.setData(someData);
        somePlot.draw();
    }
}
var optionsCombine = {
    xaxis: {
        ticks: ticksCombine,
        font: {
            color: '#000',
            size: 12
        }
    },
    yaxes: [{
        tickSize: 10000,
        max: 30000,
        tickFormatter: function(v, axis) {
            return v.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
        },
    }, {
        tickSize: 10,
        min: -10,
        tickLength: 10,
        position: "right",
        tickFormatter: function(v, axis) {
            return v + "%";
        }
    }],
    tooltip: true,
    tooltipOpts: {
        content: "%s: %y",
        shifts: {
            x: -60,
            y: 25
        },
        defaultTheme: false
    },
    legend: {
        noColumns: 4,
        container: $("#combine-chart-legend"),
        labelFormatter: function(label, series) {
            return '<a href="javascript:;" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
        }
    },
    grid: {
        borderWidth: 0,
        hoverable: true,
        tickColor: "#DDD",
    },
};
somePlot = $.plot($("#combine-chart"), datasetCombine, optionsCombine);

// Realtime update chart
// --------------------------------------------------

var data = [];
var datasetRealtime;
var totalPoints = 100;
var updateInterval = 1000;
var now = new Date().getTime();

function getData() {
    data.shift();
    while (data.length < totalPoints) {
        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];
        data.push(temp);
    }
}
var optionsRealtime = {
    series: {
        lines: {
            show: true,
            lineWidth: 1,
            fill: 1
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [2, "second"],
        tickFormatter: function(v, axis) {
            var date = new Date(v);
            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return hours + ":" + minutes + ":" + seconds;
            } else {
                return "";
            }
        },
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        }
    },
    yaxis: {
        min: 0,
        max: 100,
        tickSize: 10,
        tickLength: 10,
        font: {
            color: '#000',
            size: 12
        },
        tickFormatter: function(v, axis) {
            return v + "%";
        }
    },
    legend: {
        noColumns: 2,
        container: $("#realtime-chart-legend")
    },
    grid: {
        borderWidth: 0,
        tickColor: "#FFF"
    }
};
getData();
datasetRealtime = [{
    label: "CPU Loading",
    data: data,
    color: "#46BFCB"
}];
$.plot($("#realtime-chart"), datasetRealtime, optionsRealtime);

function update() {
    getData();
    $.plot($("#realtime-chart"), datasetRealtime, optionsRealtime)
    setTimeout(update, updateInterval);
}
update();